<template>
	<view class="full-page" v-if="totalPage">
		
	</view>
	<view class="content" v-else>
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="热门圈子" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="empytView" v-if="!list.total">
			<image :src="'/images/kong.png' | formatImgUrl" mode="widthFix" />
			<!-- <view>- 空列表 -</view> -->
		</view>
		<view class="huli" v-for="item in quanList">
			<image :src="item.img | formatImgUrl" class="quanhead" mode=""></image>
			<view class="hucen" @click="$go('/pages/find/circledetail?id='+item.id)">
				<view class="hutitle">
					{{item.name}}
				</view>
				<view class="hutxt">
					{{item.row_num}}帖子
					<text>{{item.fans_num}}粉丝</text>
				</view>
			</view>
			<view class="join" @click="joinGroup(item)" v-if="!item.is_join"> 
				加入
			</view> 
			<view class="join2" @click="joinGroup(item)" v-else>
				已加入
			</view> 
		</view>
	</view>
</template>
<script>
	import * as db from '@/common/db.js'
	export default {
		data() {
			return {
				list:{},
				page: 1,
				// 圈子列表
				quanList:[],
				totalPage: true
			}
		},
		onLoad() { 

		},
		onShow() {
			this.getList()
		},// 上拉加载
		onReachBottom() {
			if (this.list.current_page < this.list.last_page) {
				this.page++; // 页数加一，加载下一页数据
				this.getList();
			}
		},
		methods: {
			joinGroup(item) {
				let auth = db.get('auth');
				console.log(auth,777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
				
				this.$api.default.request('Discover/joinGroup', {
					id: item.id
				}, 'POST').then((res) => {
					if (res.code) {
						this.$common.successToShow(res.msg, () => {
							this.getList()
						})
					}
				})
			},
			getList(){
				this.$api.default.request('Discover/hotList',{}).then((res) => {
					if (res.code) {
						this.list = res.data
						if (res.data.current_page > 1) {
							res.data.data.forEach((item) => {
								this.quanList.push(item)
							})
						} else {
							this.quanList = res.data.data
						}
					}
					
					this.totalPage = false
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: rgba(242, 245, 242, 1);
	}

	.content{
		
		
		
		.huli:last-child{
			border-bottom: none;
		}
		.huli{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			border-bottom: 1px solid rgba(153, 153, 153, 0.1);
			height: 134rpx;
			background-color: #ffffff; 
			.head{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				flex-shrink: 0;
			}
			.quanhead{
				width: 100rpx;
				height: 100rpx;
				border-radius: 12px;
				flex-shrink: 0;
			}
			.hucen{
				padding: 0 12rpx;
				flex-grow: 1;
				.hutitle{
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					padding-bottom: 8rpx;
				}
				.hutxt{
					font-size: 20rpx;
					color: #999999;
					text{
						padding-left: 20rpx;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
			.join{
				width: 104rpx;
				height: 40rpx;
				border-radius: 4px;
				opacity: 1;
				background: #45C4B0;
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #FFFFFF;
				flex-shrink: 0;
			}
			
			.join2{
				width: 104rpx;
				height: 40rpx;
				border-radius: 4px;
				opacity: 1;
				background: rgba(69, 196, 176, 0.15);
				text-align: center;
				line-height: 40rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #45C4B0;
				flex-shrink: 0;
			}
		}
		
	}
</style>